import Taro, { Component } from '@tarojs/taro'
import { View, Image} from '@tarojs/components'
import styles from './index.module.less'

// console.log(styles);
// padding-bottom: 56.25%;

export default class CardList extends Component {

    render() {
        const { 
                img , 
                type ,
                title , 
                subTitle , 
                tags = [],
                price,
                roundedBorder,
                imgHeight = '56.25%',
                imgMode = 'scaleToFill',
                textStyle,
            } = this.props
        const coverTagType = type === 'audio' ? '' : ''
        return (
            <View className={styles.item} style={roundedBorder? {borderRadius: '8Px'} : null}>
                <View className={styles.cover} style={{paddingBottom : imgHeight}}>
                    <Image className={styles.coverImage} src={img} mode={imgMode}></Image>
                    {type && <Image className={styles.coverTagImg} src={coverTagType}></Image>}
                    <View className={styles.coverTags}>
                        {tags.map((tag, index)=><View  className={styles.coverTag} key={index}>{tag}</View>)}
                    </View>
                </View>
                <View className={styles.text} style={textStyle}>
                    <View className={styles.title}>
                        {title}
                    </View>
                    <View className={styles.subTitle}>
                        {subTitle}
                    </View>
                    <View className={styles.priceDesc}>
                        { price != undefined && (price ? `¥${price}` : '免费试听')}
                    </View>
                </View>

            </View>
        )
    }
}
